<template>
  <div class="content">
    <div style="height:20%" v-if="state===0||state===9"></div>
    <div style="height:30%" v-else></div>
    <div class="blocker">


      <div class="image" v-if="state===6||state===2||state===1||state===5||state===7">
          <img :src="require('../../assets/test2/'+curCotent)">
      </div>

      <div class="instructions" v-if="state===3">
        <p style="font-size:100px;text-align:center">{{ curCotent }}</p>
      </div>
      <div class="instructions" v-if="state===0">
        <p style="font-size:30px;text-align:center;font-weight:bold">指导语</p>
        <p style="font-size:25px;text-align:left">
          欢迎参加我们的实验。请你首先确定<span style="color: red">关闭了输入法</span>。接下来，请你
          <span style="color: red">将习惯用手（利手）的食指和无名指放在键盘</span>上，以按照要求进行按键反应。
        </p>
        <p style="font-size:25px;text-align:left">
          实验开始之后，屏幕中间首先会出现“+”号，提醒你需要集中注意了，不需要做出反应。
          随后，屏幕中心会出现3个方块，你需要<span style="color: red">记住这3个方块的位置；</span>
          接下来，会出现的1个方块，请<span style="color: red">判断这1个方块的位置是否与先前3个方块中的某一个位置相同</span>，并进行按键。
        </p>
        <p style="font-size:25px;text-align:left">如果<span style="color: red">相同</span>，按<span style="color: red">J</span>键；如果不同，按<span style="color: red">F</span>键。</p>
        <p style="font-size:25px;text-align:left">请在保证<span style="color: red">正确率</span>的前提下，<span style="color: red">快速</span>的做出反应。</p>
        <p style="font-size:25px;text-align:left">准备好后，请按空格键，看图示。</p>
      </div>

      <div class="instructions" v-if="state===9">
        <p style="font-size:30px;text-align:center;font-weight:bold">指导语</p>
        <p style="font-size:25px;text-align:left">
          下面是练习阶段，你在作答后将会得到正确或错误的反馈。你在本阶段的作答不计入最终成绩。
        </p>
        <p style="font-size:25px;text-align:left">
          如果阅读完上述指导语，请按空格键开始。
        </p>
      </div>

      <div class="instructions" v-if="state===4">
        <p style="font-size:25px;text-align:center">
          练习结束，请按空格键进入测试阶段</p>
      </div>
    </div>
    <div class="back"></div>
  </div>


</template>

<script>
import {useRouter} from "vue-router";
import {checkAnswer, postAnswer} from "@/utils/api";
import {message} from 'ant-design-vue';

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Test1",
  data() {
    return {
      arrCotent: [["T24", "P24","j"], ["T7", "P7", 'j'], ["T126", "P126", 'f'], ["T129", "P129", 'f'], ["T121", "P121", 'f'], ["T13", "P13", 'j'], ["T133", "P133", 'f'], ["T37", "P37", 'j']],
      state: 0, // 0为介绍，1为q,5为a,2为+号，3为答案，4为结束，6为加号，7为图事
      curLeval: 0,
      answer: "",
      req: [],
      delta: null,
      router: useRouter(),
    };
  },
  beforeCreate() {
    checkAnswer("test2", 2).then(res => {
      if (res.data.checked === 1) {
          // 原先是跳到任务三test3
        this.router.push("/test")
      }
    })
  },
  created: function () {
    const _this = this;
    document.onkeydown = function (event) {
      let key = event.key;
      if (_this.state === 0) {
        if (key === " ") {
          setTimeout(function () {
            _this.state = 7;
          }, 250);
        } else {
          message.error("请输入正确的键位");
        }
      }
      if (_this.state === 7) {
        if (key === " ") {
          setTimeout(function () {
            _this.state = 9;
          }, 250);
        } else {
          message.error("请输入正确的键位");
        }
      }

      if (_this.state === 9) {
        if (key === " ") {
          _this.plus(); //250ms
          _this.pic3(); //1250ms
          _this.plus2(); //1450ms
          _this.pic1(); //5450ms
          return
        } else {
          message.error("请输入正确的键位");
        }
      }


      if (_this.state === 5) {
        if (key === 'j' || key === 'f') {
          _this.load(key);
          return
        } else {
          message.error("请输入正确的键位");
        }
      }

      if (_this.state === 4) {
        if (key === " ") {
          _this.router.push("/test2/round2")
        } else {
          message.error("请输入正确的键位");
        }
      }
    };
  },
  computed: {
    curCotent: function () {
      let res;
      if (this.state === 1) {
        const w = this.arrCotent[this.curLeval][0];
        res = w+".png";
      }
      if (this.state === 2||this.state === 6) {
        res = "+.png";
      }
      if (this.state === 3) {
        res = this.answer;
      }
      if (this.state === 5) {
        const w = this.arrCotent[this.curLeval][1];
        res = w+".png";
      }
      if (this.state === 7) {
        const w = "demo2";
        res = w+".png";
      }
      return res;
    },
  },
  methods: {
    plus: function () {
      let _this = this
      setTimeout(function () {
        _this.state = 2;
      }, 250);
    },
    plus2: function () {
      let _this = this
      setTimeout(function () {
        _this.state = 6;
      }, 1300);
    },
    // 呈现有三个方块的图片
    pic3: function () {
      let _this = this
      setTimeout(function () {
        _this.state = 1;
        _this.delta = new Date();
      }, 1000);
    },
    // 呈现有一个方块的图片，被试按键
    pic1: function () {
      let _this = this
      setTimeout(function () {
        _this.state = 5;
        _this.delta = new Date();
      }, 2450);
    },

    end: function () {
      let _this = this
      setTimeout(function () {
        _this.state = 4;
      }, 500);
    },
    load: async function (key) {
      if (this.arrCotent[this.curLeval][2] === key) {
        this.answer = "正确"
      } else {
        this.answer = "错误"
      }
      let data = {"token": this.arrCotent[this.curLeval][1], "answer": this.answer, "delta": new Date() - this.delta};
      this.req.push(data);
      this.curLeval += 1;
      this.state = 3;
      if (this.curLeval === 8) {
        this.server();
        this.end();
        return
      }
      this.plus();
      this.pic3();
      this.plus2();
      this.pic1();
    },
    server: function () {
      postAnswer(this.req,"test2",1)
    },
  }
}

</script>

<style scoped>
.content {
  width: calc(100% - 200px)!important;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  cursor: pointer;
  position: absolute;
  flex-direction: column;
}

.blocker {
  justify-content: center;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 33%;
}

.instructions {
  width: 60%;
  color: #ffffff;
}
</style>
